require(['./config'], () => {
    require(['template', 'url', 'header', 'fly', 'zoom', 'footer'], (template, url, header) => {
        class Details {
            constructor () {
                this.renderDetail()
                this.getData().then(() => {
                    this.renderDetails()
                    this.addTocart()
                    this.zoom()
                    this.addtion()
                })
            }
            // 详情页中的  猜你喜欢 假数据
            renderDetail () {
                // 请求json文件 渲染ul
                $.get('/libs/json/Details.json', resp => {
                    // 根据数据渲染模板引擎
                    // 第一个参数传模板引擎的id名（不加#）
                    // 第二个参数是对象 在html中定义的名以及数据
                    const str = template('details-likes', {
                        list:resp
                    })
                    $('#details-list').html(str)
                })
            }
            // rap2 假数据渲染
            getData() {
                // 取到id 根据id请求数据
                const id = Number(window.location.search.slice(4))
                return new Promise(resolve => {
                    $.get(url.base + '/details/data',{ id }, resp => {                    
                        if (resp.code === 200) {
                            console.log(resp)
                            const { details } = resp.body
                            // 由于使用的是rap2接口details里没有正确的id 所以我们要手动加上去 真实接口不需要这样
                            // 把返回的details展开 加上id字段 写给this对象 这样别的方法也能访问到details
                            this.details = { ...details,id}
                            resolve()
                        }
                    })
                })
            }
            renderDetails () {
                // 由于模板引擎里每一个字段都是分开写的 所以需要展开传
                $('#details').html(template('detailTemplate', {...this.details}))
            }
            addTocart() {
                $('#add-cart').on('click', e => {
                    this.fly(e)
                    // 把当前商品数据存入localStorage 将来真实项目还要交互后端
                    // 先取出来 判断是否为空
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        // 表示有数据
                        // 先把取出来的数据转成json数组 再push 最后存
                        // 判断当前商品再购物车里是否已存在
                        // 如果已存在 count数量加上去
                        // 不存在 就push
                        // 最后再存
                        cart = JSON.parse(cart)
                        //some方法只要遍历到一个满足条件的就不会继续遍历 所以存下来的就是最后满足的下标
                        const isExsit = cart.some((shop, index) => {
                            return shop.id === this.details.id
                        })
                        if (isExsit) {
                            // 已存在
                            cart = cart.map(shop => {
                                if (shop.id === this.details.id) shop.count++
                                return shop
                            })
                        } else {
                            // 当前商品第一次加购物车
                            cart.push({
                                ...this.details,
                                count:1,
                                check:true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        // 购物车为空 创建一个只有当前商品这一条数据的数组存进去
                        // 转换数组类型存入cart里面
                        // 除了存details自身的属性外 还需要存数量count(默认为1 可以写成input的value)
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.details,
                            count:1,
                            check:true
                        }]))
                    }
                })
            }
            fly (e) {
                // 抛物线效果
                $(`<img src="${this.details.images[0].img}" style="width:30px;height:30px;border-radius:50%">`).fly({
                    start:{
                        left: e.clientX, //开始位置 （必填） #fly元素会被设置成position：fixed
                        top: e.clientY, // 开始位置 （必填）
                    },
                    end:{
                        left:$('.cart').position().left,  // 结束位置（必填）
                        top:$('.cart').position().top     // 结束位置（必填） 
                    },
                    speed:1.1, // 越大越快，默认值为1.2
                    vertex_Rtop:30, // 运动轨迹最高点的top值 默认为20
                    onEnd:function() {
                        this.destroy()
                        // 抛物线结束之后 实现实时数据
                        header.calcCartCount()
                    }// 结束回调
                })
            }
            zoom () {
               
                $('.zoom-image').elevateZoom({
                    // 传递所有小图的父级容器的id
                    gallery:'gal1'
                })
            }
            addtion () {
                let index = 1
                $('#addit').on('click', function () {
                    index++
                    if (index>=10) index=10
                    $('#carNum').val(index)
                })
                $('#reduces').on('click', function () {
                    $('#carNum').val(index)
                    index--
                    if (index<=1) index=1
                    $('#carNum').val(index)
                })
            }
        }
        new Details()
    })
})